<template>
  <div>
    <!-- 表单数据 -->
    <FormPanel ref="formPanel" :list="formList" :cols="3" labelWidth="110" :isSubmitBtn="false" @formChange="formChangeHandle" />

    <!--PDI申请单明细-->
    <LazyLoadTab v-model="activeName" :tabMenus="menus"></LazyLoadTab>

    <!--间隔-->
    <div style="width:100%;height:44px;"></div>

    <template v-if="id">
      <!--审核信息-->
      <LazyLoadTab v-model="activeName1" :tabMenus="menus1"></LazyLoadTab>
      <!--间隔-->
      <div style="width:100%;height:44px;"></div>
    </template>

    <!--操作按钮-->
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button v-if="type != 'read'" type="primary" @click="addFile()">添加附件</el-button>
      <el-button v-if="type != 'read'" type="primary" @click="save()">保存</el-button>
      <el-button @click="back()">返回</el-button>
    </div>

    <!--选择委托书抽屉-->
    <BaseDialog :visible.sync="orderVisible" title="委托书页面" :destroyOnClose="true">
      <chooseOrder @cancle="closeChooseRO" @req="reqChooseRO" />
    </BaseDialog>

    <!--选择营业网点抽屉-->
    <BaseDialog :visible.sync="networkVisible" title="营业网点页面" :destroyOnClose="true">
      <chooseNetwork @cancle="closeNetwork" @req="reqChooseNetwork" />
    </BaseDialog>

    <BaseDialog :visible.sync="uploadVisible" title="添加附件" :destroyOnClose="true">
      <uploadComponents :type="id ? 2 : 1" :fileList="fileList" :emitData="emitData" @addChange="changeFile" @close="uploadVisible = false" />
    </BaseDialog>
  </div>
</template>
<script>
import { getPDIById, savePDI, getFileList } from '@/api/repair/otherBusiness/maintainPDI/index';
import dictCode from '@/utils/dictCode';
import { dictionary } from '@/utils/dictMixin';
import { mapActions, mapState } from 'vuex';
import moment from 'moment';
import { getUserId, getUser } from '@/assets/js/auth';
import chooseOrder from './chooseOrder.vue';
import chooseNetwork from './chooseNetwork.vue';
import uploadComponents from './uploadComponents.vue';

export default {
  name: 'MaintenanceApplicationDetail',
  components: {
    chooseOrder,
    chooseNetwork,
    uploadComponents
  },
  mixins: [dictionary],
  props: ['id', 'type'],
  data() {
    return {
      formList: this.createFormList(), // 表单
      activeName: 'PDI申请单明细', // PDI申请单明细Tab页
      menus: this.getMenuList(),
      activeName1: '审核信息', // 审核信息Tab页
      menus1: this.getMenuList1(),
      orderVisible: false, // 委托书抽屉是否展示
      networkVisible: false, // 营业网点抽屉是否展示
      saveData: {}, // 保养申请单编辑对象
      pdiApplicationDtlList: [], // 保养申请单明细
      emitData: {},
      uploadVisible: false, // 是否显示上传附件弹框
      fileList: [] // 文件列表
    };
  },
  created() {
    if (this.id) {
      this.getPDIById(this.id);
      this.getFileList(this.id);
    }
  },
  methods: {
    getMenuList() {
      let that = this;
      return [
        {
          title: 'PDI申请单明细',
          path: 'repair/otherBusiness/maintainPDI/maintainPDIDtls',
          params: {
            id: this.id,
            type: this.type,
            vehicleTypeCode: null
          },
          on: {
            itemClallback: this.eventHandle
          }
        }
      ];
    },
    getMenuList1() {
      return [
        {
          title: '审核信息',
          path: 'repair/otherBusiness/maintainPDI/examineInfo',
          params: {
            id: this.id
          }
        }
      ];
    },
    /** 根据ID查询申请单数据 */
    async getPDIById(id) {
      let res = await getPDIById(id);
      let data = res.data;
      this.saveData = res.data;
      this.menus[0].params.vehicleTypeCode = res.data.vehicleTypeCode;
      for (let i in data) {
        this.formList.map(y => {
          if (i == y.fieldName) {
            y.initialValue = data[i];
          }
        });
      }
    },
    // 获取附件列表
    async getFileList(id) {
      let res = await getFileList(id);
      this.fileList = res.data || [];
    },
    createFormList() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '维护区域'
        },
        {
          type: 'INPUT',
          label: '申请单号',
          fieldName: 'applicationNo',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '申请人代码',
          fieldName: 'applierCode',
          initialValue: getUserId(),
          disabled: true
        },
        {
          type: 'INPUT',
          label: '申请人',
          fieldName: 'applierName',
          initialValue: getUser(),
          disabled: true
        },
        {
          type: 'INPUT',
          label: '营业网点代码',
          fieldName: 'websiteCode',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '营业网点',
          fieldName: 'websiteName',
          disabled: this.type == 'read',
          readonly: true,
          unitRender: props => {
            return (
              <div>
                <i slot="suffix" style="line-height: 30px" class="el-input__icon el-icon-circle-plus" onClick={() => this.openNetwork()}></i>
              </div>
            );
          }
        },

        {
          type: 'INPUT',
          label: '委托书编号',
          fieldName: 'orderNo',
          disabled: this.type == 'read',
          readonly: true,
          unitRender: props => {
            return (
              <div>
                <i slot="suffix" style="line-height: 30px" class="el-input__icon el-icon-circle-plus" onClick={() => this.openChooseOrder()}></i>
              </div>
            );
          }
        },
        {
          type: 'DATE',
          label: '检查日期',
          fieldName: 'checkDate',
          disabled: true
        },
        {
          type: 'INPUT',
          label: 'VIN码',
          fieldName: 'vin',
          rules: [{ required: true, message: '请输入VIN码', trigger: 'blur' }],
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车辆型号代码',
          fieldName: 'vehicleTypeCode',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车辆型号',
          fieldName: 'vehicleTypeName',
          disabled: true
        },
        {
          type: 'DATE',
          label: '生产日期',
          fieldName: 'productDate',
          disabled: true
        },
        {
          type: 'DATE',
          label: '销售日期',
          fieldName: 'saleDate',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '服务车系代码',
          fieldName: 'vehicleSeriesCode',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '服务车系',
          fieldName: 'vehicleSeriesName',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '品牌代码',
          fieldName: 'brandCode',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '品牌',
          fieldName: 'brandName',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '牌照号',
          fieldName: 'licenseNo',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '发动机号',
          fieldName: 'engineNo',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '行驶里程',
          fieldName: 'mileage',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '产品代码',
          fieldName: 'productCode',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '产品名称',
          fieldName: 'productName',
          disabled: true
        },

        {
          type: 'INPUT',
          label: '客户代码',
          fieldName: 'customerCode',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '客户名称',
          fieldName: 'customerName',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '客户地址',
          fieldName: 'customerAddress',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '移动电话',
          fieldName: 'mobilePhone',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '固定电话',
          fieldName: 'phone',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '电子标签扫描状态',
          fieldName: 'labelStatus',
          disabled: this.type == 'read'
        },
        {
          type: 'INPUT',
          label: '邮编',
          fieldName: 'postCode',
          disabled: true
        },
        {
          type: 'DATE',
          label: '提交日期',
          fieldName: 'commitDate',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '检查费用',
          fieldName: 'checkFee',
          disabled: this.type == 'read'
        },
        {
          type: 'SELECT',
          label: '单据状态',
          fieldName: 'status',
          disabled: true,
          initialValue: 67011001,
          itemList: this.createDictList('6701')
        },
        {
          type: 'INPUT',
          label: '服务站备注',
          fieldName: 'dealerRemark',
          selfCols: 3,
          disabled: this.type == 'read'
        }
      ];
    },
    // 打开委托书查询框
    openChooseOrder() {
      this.orderVisible = true;
    },
    // 关闭委托书查询框
    closeChooseRO() {
      this.orderVisible = false;
    },
    // 选择委托书
    reqChooseRO(val) {
      for (let i in val) {
        this.formList.map(y => {
          if (i == y.fieldName) {
            y.initialValue = val[i];
          }
        });
      }
      this.menus[0].params.vehicleTypeCode = this.formList.find(item => item.fieldName === 'vehicleTypeCode').initialValue;
      this.orderVisible = false;
    },
    // 打开营业网点
    openNetwork() {
      this.networkVisible = true;
    },
    // 关闭营业网点
    closeNetwork() {
      this.networkVisible = false;
    },
    // 选择营业网点
    reqChooseNetwork(val) {
      for (let i in val) {
        this.formList.map(y => {
          if (i == y.fieldName) {
            y.initialValue = val[i];
          }
        });
      }
      this.networkVisible = false;
    },
    // 保存
    save() {
      this.$refs.formPanel.SUBMIT_FORM();
    },
    // 表单验证回调
    formChangeHandle(val) {
      this.saveData = Object.assign(this.saveData, val);
      this.saveData.pdiApplicationDtlList = this.pdiApplicationDtlList;
      this.saveData.fileList = this.fileList;
      savePDI(this.saveData).then(res => {
        if (res.resultCode === 200) {
          this.$notify({
            title: '提示信息',
            message: (this.type == 'add' ? '新增' : '保存') + '成功！',
            type: 'success'
          });
          this.back('refresh');
        }
      });
    },
    /** 返回按钮 */
    back(type) {
      this.$emit('return', type);
    },
    // 选择明细回调
    eventHandle(pdiApplicationDtlList) {
      this.pdiApplicationDtlList = pdiApplicationDtlList;
      // let pdiFee = 0;
      // this.pdiApplicationDtlList.map(x => {
      //   pdiFee = Number(x.pdiFee) + Number(pdiFee);
      // });
      // this.formList.find(item => item.fieldName === 'checkFee').initialValue = pdiFee;
    },
    // 打开上传附件弹框
    addFile() {
      if (this.id) {
        this.emitData.id = this.saveData.id;
      }
      this.uploadVisible = true;
    },
    // 上传附件回调
    changeFile(val) {
      this.fileList = val;
      this.uploadVisible = false;
    }
  }
};
</script>
